<template>
  <div class="loginapp">
    <van-tabs v-model="Form" animated v-show="status == 1">
      <van-tab v-for="index in 2" :title="index == 1 ? '登录' : '注册'">
        <!-- 登录 -->
        <div v-if="index == 1">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                  v-model="account"
                  name="account"
                  label="账号"
                  placeholder="请输入账号"
                  :rules="[{ required: true, message: '账号不能为空' }]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '密码不能为空' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>
        </div>
        <!-- 注册 -->
        <div v-else>
          <van-form @submit="onSubmit1">
            <van-cell-group inset>
              <!-- <van-field
                v-model="account"
                name="name"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              /> -->
              <van-field
                  v-model="account"
                  name="account"
                  label="账号"
                  placeholder="账号"
                  :rules="[{ required: true, message: '请填写账号' }]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码哦' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                注册
              </van-button>
            </div>
          </van-form>
        </div>
      </van-tab>
      <!-- 手机号登录 -->
    </van-tabs>
    <van-form @submit="onSubmit3" v-show="status == 2">
      <van-cell-group inset>
        <van-field
            v-model="phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field
            v-model="sms"
            center
            name="sms"
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
                size="small"
                type="primary"
                :disabled="phone === '' ? true : false"
                @click="getcode"
            >发送验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <div class="bigbox">
      <div class="btn1" @click="status = 2">
        <van-icon name="phone-o" size="30" />
        手机号登录
      </div>
      <!-- <div class="btn1">
        <van-icon name="manager-o" size="30" />
        第三方登录
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { useUserStore } from "@/store/user";

import { createApp, ref } from "vue";
import {
  Icon,
  Form,
  Field,
  CellGroup,
  PasswordInput,
  NumberKeyboard,
  showSuccessToast,
  showToast,
  Toast,
} from "vant";
import { get, post, put, del } from "../../request.ts";
import { useRouter } from "vue-router";
const app = createApp();
const userStore = useUserStore();
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(PasswordInput);
app.use(NumberKeyboard);
app.use(Icon);
app.use(Toast);

const account = ref("");
const password = ref("");
const router = useRouter()
const onSubmit = async (values) => {
  let data = await post(`/users/login`, values);
  console.log(data);
  if (data.code === 200) {
    userStore.set_user(data.data)
    localStorage.setItem('token', userStore.user.account)
    showSuccessToast(data.msg);
  } else {
    Toast.show(data.msg);
  }
};

const onSubmit1 = async (values) => {
  console.log(values);
  let data = await post(`/users/add`, values);
  if (data.code === 200) {
    showSuccessToast(data.msg);
  } else {
    showToast(data.msg);
  }
};
const status = ref(1);
const phone = ref("");
const sms = ref("");
const newcode = ref("");
const getcode = async () => {
  let { code, codes } = await post("/users/getcode", { phone: phone.value });
  if (code == 200) {
    showSuccessToast("验证码发送成功");
    newcode.value = codes;
  } else {
    showToast("验证码发送失败");
  }
};
const onSubmit3 = (values) => {
  console.log(newcode.value);
  console.log(values);
  if (newcode.value == values.sms) {
    showSuccessToast("登录成功");
    router.push('/home/message')
  } else {
    showToast("验证码错误");
  }
};
</script>

<style>
.loginapp {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.bigbox {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.btn1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
</style>
